<template>
  <div>
    <br />
    <div>
      <i class="el-icon-paperclip" style="margin-left: 10px;"/>
      <span> 生日关怀</span>
    </div>
    <el-card style="width: 98%; margin-left: 10px;">
      <br />
      <el-row>
        <el-col :span="20">
          <el-alert style="width: 70%;margin-left: 240px;"
            :title="title" type="success"
            center :closable="false">
          </el-alert>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-document" size="medium" @click="careBtn">赠送记录查询</el-button>
        </el-col>
      </el-row>
      <br />
      <el-table :data="userList" height="580"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 97%;margin-left: 25px;margin-bottom: 30px;">
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="userName" label="会员姓名" width="200"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80"></el-table-column>
        <el-table-column prop="phone" label="手机号码" width="200"></el-table-column>
        <el-table-column prop="birthday" label="生日" width="200"></el-table-column>
        <el-table-column prop="day" label="生日倒数" width="320">
          <template slot-scope="scope">
            <div v-if="scope.row.day!==null">
              <span>距离会员生日还有</span>
              <el-tag type="primary" v-text="scope.row.day"
              style="font-size: 15px;margin-left: 20px;margin-right: 20px;"/>
              <span>天</span>
            </div>
            <div v-else>
              <span>距离会员生日还要好久好久哦~</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-s-help" size="medium"
            @click="careIntegralBtn(scope.row)" style="margin-right: 8px;">积分赠送</el-button>
            <el-button type="danger" icon="el-icon-goods" size="medium" @click="careWaresBtn(scope.row)">商品赠送</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 赠送记录查询对话框 -->
    <el-dialog title="赠送记录查询" :visible.sync="careDialog" width="48%">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="积分赠送" name="1">
          <el-table :data="careList1" max-height="280px"
          ref="filterTable" :default-sort = "{prop: 'careTime', order: 'descending'}"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          style="width: 97%;margin-bottom: 30px;margin-left: 8px;">
            <el-table-column prop="id" label="赠送单号" width="150px"></el-table-column>
            <el-table-column prop="userName" label="会员姓名" width="150px"></el-table-column>
            <el-table-column prop="cardId" label="会员卡号" width="200px"></el-table-column>
            <el-table-column prop="integral" label="赠送积分" width="120px">
              <template slot-scope="scope">
                <span style="color: black;">+</span>
                <span v-text="scope.row.integral" style="color: black;"></span>&nbsp;
                <i class="el-icon-top" style="color: limegreen;"></i>
              </template>
            </el-table-column>
            <el-table-column prop="careTime" label="赠送时间" width="220px" sortable></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="商品赠送" name="0">
          <el-table :data="careList2" max-height="280px"
          ref="filterTable" :default-sort = "{prop: 'careTime', order: 'descending'}"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          style="width: 97%;margin-bottom: 30px;margin-left: 8px;">
            <el-table-column prop="id" label="赠送单号" width="180px"></el-table-column>
            <el-table-column prop="userName" label="会员姓名" width="180px"></el-table-column>
            <el-table-column prop="waresName" label="赠送商品" width="220px">
              <template slot-scope="scope">
                <el-tag type="danger" style="font-size: 13px;" v-text="scope.row.waresName"></el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="careTime" label="赠送时间" width="240px" sortable></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <span>
        <el-button type="primary" @click="careDialog = false" style="margin-left: 400px;">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 积分赠送对话框 -->
    <el-dialog title="积分赠送" :visible.sync="careIntegralDialog" width="40%" @close="closeCareIntegralDialog">
      <el-form :model="cardForm" :rules="cardRules" ref="cardFormRef" label-width="100px">
        <el-row>
            <el-col :span="12">
              <el-form-item label="会员姓名" prop="userName" style="width: 90%;">
                <el-input v-model="cardForm.userName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员卡号" prop="id" style="width: 90%;">
                <el-select v-model="cardForm.id" @change="getIntegral" filterable>
                  <el-option v-for="card in cardList" :key="card.id" :label="card.id" :value="card.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赠送积分" prop="careIntegral" style="width: 90%;">
                <el-input v-model="cardForm.careIntegral"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="careIntegralDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveCareIntegral">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 商品赠送对话框 -->
    <el-dialog title="商品赠送" :visible.sync="careWaresDialog" width="40%" @close="closeCareWaresDialog">
      <el-form :model="waresForm" :rules="waresRules" ref="waresFormRef" label-width="100px">
        <el-row>
            <el-col :span="12">
              <el-form-item label="会员姓名" prop="userName" style="width: 90%;">
                <el-input v-model="waresForm.userName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赠送商品" prop="id" style="width: 90%;">
                <el-select v-model="waresForm.id" @change="getWaresCount" filterable>
                  <el-option v-for="wares in waresList" :key="wares.id" :label="wares.waresName" :value="wares.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="careWaresDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveCareWares">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    created(){
      this.getUserList()
      this.getCareListByIntegral()
      this.getCareListByWares()
    },
    data(){
      return{
        title:'您 好 ， 欢 迎 进 入 会 员 生 日 关 怀 界 面 ！',
        mode:'',
        query:'',
        activeName: '1',
        userList:[],
        cardList:[],
        waresList:[],
        careList1:[],
        careList2:[],
        careDialog:false,
        careIntegralDialog:false,
        careWaresDialog:false,
        waresForm:{},
        cardForm:{},
        cardRules: {
          userName: [{
            required: true,
            message: '请选择会员',
            trigger: 'blur'
          }],
          id: [{
            required: true,
            message: '请选择会员卡',
            trigger: 'blur'
          }],
          careIntegral: [{
              required: true,
              message: '请输入赠送积分',
              trigger: 'blur'
            }
          ]
        },
        waresRules: {
          userName: [{
            required: true,
            message: '请选择会员',
            trigger: 'blur'
          }],
          id: [{
              required: true,
              message: '请选中赠送商品',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods:{
      async getUserList(){
        const {data:result} = await this.$http.get(`/user/get?query=${this.query}&mode=${this.mode}`)
        this.userList=result.data
      },
      async getCareListByIntegral(){
        const {data:result} = await this.$http.get(`/care/getCareListByIntegral`)
        this.careList1=result.data
      },
      async getCareListByWares(){
        const {data:result} = await this.$http.get(`/care/getCareListByWares`)
        this.careList2=result.data
      },
      careBtn(){
        this.careDialog=true
      },
      closeCareIntegralDialog(){
        this.$refs.cardFormRef.resetFields()
        this.cardForm={}
      },
      careIntegralBtn(user){
        this.getCardList(user.id)
        this.cardForm.userId=user.id
        this.cardForm.userName=user.userName
        this.careIntegralDialog=true
      },
      async getCardList(userId){
        const {data:result} = await this.$http.get(`/card/getCardList?userId=${userId}&query=${this.query}`)
        this.cardList=result.data
      },
      getIntegral(id){
        for(let card of this.cardList){
          if(id===card.id){
            this.cardForm.integral=card.integral
            break
          }
        }
      },
      saveCareIntegral(){
        this.$refs.cardFormRef.validate(async valid => {
          if (!valid) return
          const {data: result} =await this.$http.post(`care/saveCareIntegral`,this.cardForm)
          if(result.status !== 200 ) return this.$message.error("积分赠送失败!")
          // this.$message.success("积分赠送成功!")
          this.title=`赠 送 成 功 ！ ${this.cardForm.id} 会 员 卡 已 获 得 ${this.cardForm.careIntegral} 积 分 ！`
          this.getCareListByIntegral()
          this.getCareListByWares()
          this.careIntegralDialog=false
        })
      },
      closeCareWaresDialog(){
        this.$refs.waresFormRef.resetFields()
        this.waresForm={}
      },
      careWaresBtn(user){
        this.getWaresList()
        this.waresForm.userId=user.id
        this.waresForm.userName=user.userName
        this.careWaresDialog=true
      },
      getWaresCount(id){
        for(let wares of this.waresList){
          if(id===wares.id){
            this.waresForm.waresName=wares.waresName
            this.waresForm.count=wares.count
            break
          }
        }
      },
      async getWaresList(){
        const {data:result} = await this.$http.get(`/wares/getWaresList`)
        this.waresList=result.data
      },
      saveCareWares(){
        this.$refs.waresFormRef.validate(async valid => {
          if (!valid) return
          const {data: result} =await this.$http.post(`care/saveCareWares`,this.waresForm)
          if(result.status !== 200 ) return this.$message.error("商品赠送失败!")
          // this.$message.success("商品赠送成功!")
          this.title=`赠 送 成 功 ！ ${this.waresForm.userName} 会 员 已 获 得 “ ${this.waresForm.waresName} ” 商 品 ！`
          this.getCareListByIntegral()
          this.getCareListByWares()
          this.careWaresDialog=false
        })
      }
    }
  }
</script>

<style>
</style>
